Unidad 2 - HTML

HTML es el lenguaje de marcado utilizado para crear páginas web. En esta unidad aprenderás estructura, etiquetas, atributos, enlaces, imágenes, formularios, tablas y organización del contenido. Cada bloque incluye teoría, ejemplos reales, posibles preguntas trampa y mini-test interactivo.

2.1 Estructura básica HTML

HTML5 DOCTYPE HEAD

Todo documento HTML necesita una estructura mínima para que el navegador interprete correctamente el contenido.

Estructura principal

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Mi página web</title> </head> <body> <h1>Hola mundo</h1> </body> </html>

Explicación de cada parte

Etiqueta	Función
<!DOCTYPE html>	Indica que usamos HTML5
<html>	Elemento raíz
<head>	Información técnica
<body>	Contenido visible

Pregunta trampa: El contenido del <title> NO aparece dentro de la página, aparece en la pestaña del navegador.

Mini-test

1. ¿Qué etiqueta contiene el contenido visible?

2.2 Elementos básicos

HTML trabaja mediante etiquetas que delimitan contenido.

Encabezados

<h1>Título principal</h1> <h2>Subtítulo</h2> <h3>Otro título</h3>

<h1> es el encabezado más importante y <h6> el menos importante.

Párrafos

<p> Este es un párrafo. </p>

Saltos y líneas

<br/> → salto de línea
<hr/> → línea horizontal

Comentarios

Los comentarios no son visibles para el usuario.

Mini-test

1. ¿Qué etiqueta crea una línea horizontal?

2.3 Formatos y etiquetas de texto

HTML permite dar formato semántico y visual al texto.

Etiqueta	Función
<b>	Negrita visual
<strong>	Importancia semántica
<i>	Cursiva visual
<em>	Énfasis semántico
<mark>	Texto resaltado

Ejemplo

<p> Texto <strong>importante</strong> y texto <em>enfatizado</em> </p>

Pregunta típica: <b> y <strong> se ven igual, pero semanticamente NO son iguales.

Mini-test

1. ¿Qué etiqueta aporta importancia semántica?

2.4 Atributos

Los atributos añaden información adicional a las etiquetas HTML.

Sintaxis

Atributos comunes

Atributo	Uso
id	Identificador único
class	Clase reutilizable
href	Enlaces
src	Ruta imágenes

Ejemplo

Un id debe ser único.

class puede repetirse; id no.

Mini-test

1. ¿Qué atributo debe ser único?

class id href

2.5 Hipervínculos o enlaces

Los enlaces permiten navegar entre páginas.

Etiqueta <a>

<a href="https://google.com"> Ir a Google </a>

Atributo target

<a href="https://google.com" target="_blank"> Abrir en nueva pestaña </a>

Valor	Función
_self	Misma pestaña
_blank	Nueva pestaña

Enlaces internos

href="#" apunta a un identificador interno.

Mini-test

1. ¿Qué atributo indica el destino del enlace?

src href action

2.6 Imágenes

La etiqueta <img> permite insertar imágenes.

Sintaxis

Atributos importantes

Atributo	Uso
src	Ruta imagen
alt	Texto alternativo
width	Ancho
height	Alto

Ejemplo completo

alt es muy importante para accesibilidad.

Mini-test

1. ¿Qué atributo contiene la ruta de la imagen?

src href target

2.7 Listas

HTML dispone de listas ordenadas y desordenadas.

Lista desordenada

Lista ordenada

Sublistas

<ul> <li>Europa <ul> <li>España</li> </ul> </li> </ul>

<li> representa cada elemento individual.

Mini-test

1. ¿Qué etiqueta crea listas ordenadas?

2.8 Tablas

Las tablas organizan información en filas y columnas.

Estructura básica

Cabeceras

<th>Nombre</th>

Combinar celdas

<td colspan="2">Celda combinada</td> <td rowspan="2">Vertical</td>

Ejemplo completo

<table border="1"> <tr> <th>Nombre</th> <th>Edad</th> </tr> <tr> <td>Ana</td> <td>22</td> </tr> </table>

Pregunta frecuente: <tr> crea filas, NO columnas.

Mini-test

1. ¿Qué etiqueta crea una fila?

2.9 Formularios

Los formularios permiten recopilar información del usuario.

Estructura básica

<form> Nombre: <input type="text"> </form>

Tipos importantes

Tipo	Uso
text	Texto
password	Contraseña
checkbox	Verificación
radio	Selección única

Select y opciones

Textarea

Ejemplo completo

<form action="enviar.php" method="post"> Nombre: <input type="text" name="nombre"> <br><br> Contraseña: <input type="password" name="pass"> <br><br> <input type="submit" value="Enviar"> </form>

method="post" es más seguro que GET.

Mini-test

1. ¿Qué atributo indica el método HTTP?

href src method

2.10 Bloques: div y span

Las etiquetas <div> y <span> sirven para agrupar contenido.

<div>

Elemento en bloque.
Ocupa toda la línea.
Muy usado para estructurar páginas.

<div class="contenedor"> <h1>Título</h1> </div>

<span>

Elemento en línea.
No rompe la línea.
Ideal para resaltar texto.

<p> Texto normal <span style="color:red"> texto resaltado </span> </p>

Pregunta típica: <div> es bloque; <span> es línea.

Mini-test

1. ¿Qué etiqueta es un elemento en línea?